<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>系统信息显示</title>
  <link rel="stylesheet" href="lib/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">系统监控器</a>
    </div>
    <div id="navbar">
      <ul class="nav navbar-nav">
        <li><a href="#" id="overview">概览</a></li>
        <li><a href="#" id="cpu">CPU 详情</a></li>
        <li><a href="#"  id="memory">内存详情</a></li>
        <li><a href="#" id="process">进程信息</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="content">
  <!--summary-->
  <div class="summary container">
    <div class="row">
      <div class="metro-card">
        <h2 class="text-center">内核信息</h2>
        <table class="table table-hover">
          <tbody>
          <tr>
            <td>版本</td>
            <td id="kernel-version"></td>
          </tr>
          <tr>
            <td>编译器</td>
            <td id="kernel-compiler"></td>
          </tr>
          <tr>
              <td>编译时间</td>
              <td id="kernel-time"></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4 col-xs-offset-1 metro">
        <h2 class="text-center">CPU 占用率</h2>
        <p class="text-center" id="cpu-usage"> </p>
      </div>
      <div class="col-xs-4 col-xs-offset-2 metro">
        <h2 class="text-center">内存占用率</h2>
        <p class="text-center" id="memory-usage"> </p>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4 col-xs-offset-1 metro">
        <h2 class="text-center">进程总数</h2>
        <p class="text-center" id="process-number"> </p>
      </div>
      <div class="col-xs-4 col-xs-offset-2 metro">
        <h2 class="text-center">系统已运行时间</h2>
        <p class="text-center" id="runtime"> </p>
      </div>
    </div>
  </div>
  <!--cpu info-->
  <div class="cpu-info container">
    <div class="row">
      <div class="metro-card cpu-basic">
        <table class="table table-hover">
          <caption>CPU 信息</caption>
          <tbody id="cpu-table">
          <tr>
            <td>核心数</td>
            <td id="cpu-num"></td>
          </tr>
          <tr>
            <td>种类</td>
            <td id="cpu-type"></td>
          </tr>
          <tr>
            <td>频率</td>
            <td id="cpu-hz"></td>
          </tr>
          <tr>
            <td>缓冲大小</td>
            <td id="cpu-cache"></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="metro-card" id="cpu-svg">
      </div>
    </div>
  </div>
  <!--memory info-->
  <div class="memory-info container">
    <div class="row">
      <div class="metro-card memory-basic">
        <table class="table table-hover">
          <caption>内存信息</caption>
          <tbody>
          <tr>
            <td>Total Memory</td>
            <td id="mem-total"></td>
          </tr>
          <tr>
            <td>Free Memory</td>
            <td id="mem-free"></td>
          </tr>
          <tr>
            <td>Available Memory</td>
            <td id="mem-ava"></td>
          </tr>
          <tr>
            <td>Buffers</td>
            <td id="mem-buf"></td>
          </tr>
          <tr>
            <td>Cached</td>
            <td id="mem-cached"></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="metro-card" id="mem-svg">
      </div>
    </div>
  </div>
  <!--process info-->
  <div class="process-info container metro-card">
    <div class="row">
      <table class="table table-hover ">
        <caption class="text-center"> Process Info </caption>
        <thead>
          <tr>
            <th>Name</th>
            <th>ID</th>
            <th>%CPU</th>
            <th>Memory</th>
          </tr>
        </thead>
        <tbody id="process-table-body">
        </tbody>
      </table>
    </div>
  </div>
</div>
</body>
<script>
  if (typeof module === 'object') {
    window.module = module;
    module = undefined;
  }
</script>

<script src="lib/jquery.1.12.4.min.js"></script>
<script src="lib/bootstrap.3.3.7.min.js"></script>
<script src="lib/d3.v4.min.js"></script>

<script>
  if (window.module) {
    module = window.module;
  }
</script>

<script>
  // You can also require other files to run in this process
  require('./renderer.js')
</script>

<script>
  let summery = $('.summary');
  let cpu = $('.cpu-info');
  let mem = $('.memory-info');
  let process = $('.process-info');

  $('#overview').click(function () {
    summery.show();
    cpu.hide();
    mem.hide();
    process.hide();
  });

  $('#cpu').click(function () {
    summery.hide() ;
    cpu.show();
    mem.hide();
    process.hide();
  });

  $('#memory').click(function () {
    summery.hide() ;
    cpu.hide();
    mem.show();
    process.hide();
  });

  $('#process').click(function () {
    summery.hide() ;
    cpu.hide();
    mem.hide();
    process.show();
  });


</script>
</html>
